<template>
  <div>
    <div class="detail-comment" v-if="comment && this.comment.list">
    <!-- 评论标题 -->
    <div class="comment-title">
      <span>用户评论</span>
      <span>更多({{comments}}+)</span>
    </div>
    <!-- 评论内容-用户名区域 -->
      <div class="content-user">
        <img :src="userImage" alt="">
        <span>{{userName}}</span>
    </div>
    <!-- 评论内容 -评论内容区域-->
    <div class="comment-content">
      {{content}}
    </div>
    <!-- 评论内容-发送时间 -->
    <div class="comment-info">
      <span>{{sendTime}}</span>
      <span>{{userBoughtType}}</span>
    </div>
    <div class="comment-image">
      <div class="image-item" v-for="(item, index) in comment.list[0].images" :key="index">
        <img :src="item" alt="">
      </div>
    </div>
  </div>
  </div>
</template>

<script>
// 公共方法
import { formatDate } from 'common/utils';

export default {
  name: 'DetailComment',
  props: {
    comment: {
      typs: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    comments() {// 更多评论的个数
      return this.comment.cRate;
    },
    userImage() {// 用户头像
      return this.comment.list[0].user.avatar;
    },
    userName() {// 用户名
      return this.comment.list[0].user.uname;
    },
    content() {// 评论内容
      return this.comment.list[0].content;
    },
    sendTime() {// 获取时间戳
      const time = this.comment.list[0].created * 1000;
      return formatDate(new Date(time), 'yyyy-MM-dd');
    },
    userBoughtType() {// 用户已买类型
      return this.comment.list[0].style;
    }
  }
}
</script>

<style scpoed>
  .detail-comment{
    text-align: center;
    padding: 10px 10px 30px;
    border-bottom: 5px solid rgba(121, 121, 121, .1);
  }

  /* 评论标题 */
  .comment-title{
    height: 50px;
    padding: 20px 10px 35px; 
    border-bottom: 1px solid rgba(121, 121, 121, .5);

    display: flex;
  }
  .comment-title span{
    flex: 1;
  }
  .comment-title span:nth-of-type(1){
    font-size: 17px;
    text-align: left;
    color: black;
  }
  .comment-title span:nth-last-of-type(1){
    text-align: right;
    font-size: 15px;
    padding-right: 15px;
    position: relative;
  }
  .comment-title span:nth-last-of-type(1)::after{
    content: '';
    height: 10px;
    width: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.7);
    border-right: 1px solid rgba(0, 0, 0, 0.7);
    transform: rotate(45deg) translateY(50%);
    

    position: absolute;
    right: -3px;
    top: 0;
  }

  /* 评论内容 --用户名*/
  .content-user {
    padding-top: 20px;
    display: flex;
  }
  .content-user img{
    width: 50px;
    border-radius: 200px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .content-user span{
    flex: 1;
    line-height: 50px;
    text-align: left;
    padding-left: 10px;
    color: #000;
    font-size: 16px;
  }
  
  /* 评论内容--内容 */
  .comment-content{
    text-align: left;
    padding: 10px 0;
    line-height: 23px;
  }

  /* 评论内容--发送时间 */
  .comment-info{
    display: flex;
    justify-items: flex-start;
    color: rgba(121, 121, 121, .9);
    font-size: 15px;
  }
  .comment-info span:nth-last-of-type(1){
    margin-left: 20px;
  }

  /* 评论--图片 */
  .comment-image{
    display: flex;
    margin-top: 10px;
  }
  .comment-image .image-item{
    height: 100px;
    overflow: hidden;
  }
  .comment-image img{
    width: 100px;
    margin-right: 5px;

  }
</style>